<!--
* @description:新增货主
* @fileName: TheNewOwnerOfTheGoods
* @author:李周蓬
* @date:2021-1-
* @后台人员:李周蓬
-->
<template>
  <div>
    <table>
      <tr>
        <td>货主姓名：</td>
        <td>
          <el-input
            v-model="AddData.OwnerName"
            placeholder="请输入内容"
          ></el-input>
        </td>
      </tr>
      <tr>
        <td>手机号：</td>
        <td>
          <el-input
            v-model="AddData.OwnerPhone"
            placeholder="请输入内容"
          ></el-input>
        </td>
      </tr>
      <tr>
        <td>单位名称：</td>
        <td>
          <el-select v-model="AddData.OutsourceId" placeholder="请选择">
            <el-option
              v-for="item in bindData"
              :key="item.value"
              :label="item.OutsourceName"
              :value="item.Id"
            >
            </el-option>
          </el-select>
        </td>
      </tr>
      <tr>
        <td>联系地址：</td>
        <td>
          <el-input
            v-model="AddData.OwnerAddr"
            placeholder="请输入内容"
          ></el-input>
        </td>
      </tr>
      <tr>
        <td>驾驶证有效日期：</td>
        <td>
          <el-date-picker
            v-model="AddData.DriverCardTime"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>
        </td>
      </tr>
      <tr>
        <td>备注：</td>
        <td>
          <el-input type="textarea" v-model="AddData.Remark"></el-input>
        </td>
      </tr>
      <tr>
        <td>驾驶证照片：</td>
         <td>
          <el-upload
            class="avatar-uploader"
            action="https://localhost:44399/api/app/file-common-app/uplosdqiniu"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </td>
      </tr>
      <tr>
        <td colspan="2">
          <el-button type="primary" @click="add">提交</el-button>
          <el-button @click="go">取消</el-button>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl:"",
      bindData: [],
      AddData: {
        OwnerNumber: "",
        OwnerName: "",
        OwnerPhone: "",
        OwnerAddr: "",
        DriverCardTime: "",
        CardImg: "",
        Remark: "",
        OutsourceId: 0,
      },
    };
  },
  methods: {
     handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
        this.AddData.CardImg =res.FileUrl;
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
    bind() {
      this.$axios
        .get("https://localhost:44399/api/app/owner/show-outsource")
        .then((res) => {
          this.bindData = res.data;
          this.bindData.unshift({ Id: 0, OutsourceName: "请选择" });
        });
    },
    add() {
      this.$axios
        .post("https://localhost:44399/api/app/owner/add-owner", this.AddData)
        .then((res) => {
          if (res.data > 0) {
            this.$message({
              type: "success",
              message: "添加成功!",
            });
            this.$router.push("/TheOwnerManagement");
          } else {
            this.$message({
              type: "error",
              message: "添加失败!",
            });
          }
        });
    },
    go() {
      this.$router.go(-1);
    },
  },
  created() {
    this.bind();
  },
};
</script>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>